
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>商户管理</cite></a>
    <a><cite>一码付</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">一码付列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right;">
              <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="appId" id="searchAppId" placeholder="应用ID" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="mchId" id="searchMchId" placeholder="商户ID" autocomplete="off" class="layui-input">
                </div>
                <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
              </div>
            </div>
          </div>
        <div class="layui-row">
            <div class="layuiAdmin-btns" style="margin-bottom: 10px;"></div>
        </div>
          <table id="XxPay_Mgr_QrCode_dataAll" lay-filter="XxPay_Mgr_QrCode_dataAll"></table>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .layui-layer-title {
      background-color: #15c786 !important;
      border-bottom: 1px dashed #fff !important;
      font-size: 16px;
  }
 .layui-layer-content {
      text-align: center;
  }
  .layui-wrap-content {
      width: 100%;
      text-align: center;
      background-color: #15c786;
      padding: 2px 0px;
  }
  #qrcode {
      width: 50%;
      margin: 30px auto;
      padding: 15px;
      background-color: #fff;
      text-align: center;
      border-radius: 10px;
  }
  #qrcode img {
      margin: 0 auto;
  }
  .layui-layer-title {
      color: #fff;
      text-align: center;
      height: 50px;
      padding: 0;
  }
</style>
<script type="text/html" id="xxpayBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class='layui-icon layui-icon-about'></i>查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class='layui-icon layui-icon-edit'></i>编辑</a>
  <!--<a class="layui-btn layui-btn-xs" id="ckEwm" lay-event="erweima">查看二维码</a>-->
</script>

<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script>
  layui.use(['admin', 'table', 'util'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,element = layui.element
            ,view = layui.view
            ,form = layui.form;

    element.render('breadcrumb', 'breadcrumb');

    var tplStatus = function(d){

        var checkedHtml = " id='"+d.id+"' ";
        if(d.status == 1) {
            checkedHtml += " checked";
        }
        return '<input type="checkbox" lay-filter="statusSwitch" lay-skin="switch" '+checkedHtml+' lay-text="启用|停用">';
    };

    //商户列表
    table.render({
      elem: '#XxPay_Mgr_QrCode_dataAll'
      ,url: layui.setter.baseUrl + '/mch_qrcode/list' //列表接口
      ,where: {
          access_token: layui.data(layui.setter.tableName).access_token
      }
      ,id: 'tableReload'
      ,page: true
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: '二维码ID'}
        ,{field: 'codeName', title: '二维码名称'}
        ,{field: 'appId', title: '应用ID'}
        ,{field: 'mchId', title: '商户ID'}
        ,{field: 'status', title: '状态', templet: tplStatus}
        ,{field: 'createTime', title: '创建时间', width: 200, templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
        ,{field: 'edit', title: '操作', fixed: 'right', width: 150, toolbar: '#xxpayBar' }
      ]]
      ,skin: 'line'
    });

    //监听工具条
    table.on('tool(XxPay_Mgr_QrCode_dataAll)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        view.xxpayPopup("查看", "merchant/qrcode/qrcode_view", {id: data.id}, {btn: false, area:['50%','40%']});
      } else if(obj.event === 'edit') {
        view.xxpayPopup("编辑", "merchant/qrcode/qrcode_edit", {id: data.id}, {area:['60%','70%']});
      } else if(obj.event === 'erweima') {
        var peizhiT = JSON.parse(obj.data.channels);
          admin.req({
                url: layui.setter.baseUrl + '/mch_qrcode/view_code'
                ,data: { id: data.id }
                ,success: function(res){
                    if(res.code == 0){
                        layer.open({
                            type: 1,
                            title: '二维码',
                            scrollbar: false,//浏览器滚动条已锁
                            closeBtn: 0, //不显示关闭按钮
                            shadeClose: true, //开启遮罩关闭
                            // area: ['300px', '380px'],
                            area: '300px',
                            content: '<div class="layui-wrap-content"><div id="qrcode">' +
                                    '<div style="margin-bottom:15px;">扫二维码向商户付款</div></div></div>' +
                                    '<div style="margin:10px auto;text-align:center">' +
                                    '<img id="zhifubao" style="display:none" src="layui/images/imgs/zfb.png" alt="支付宝"/>' +
                                    '<img id="weixin" style="display:none" src="layui/images/imgs/wxpay.png" alt="微信"/></div>'
                        });

                        for(var i = 0;i< peizhiT.length;i++){
                            if(peizhiT[i].split('_')[0] == 'wxpay'){
                                $('#weixin').css('display','inline-block');
                            }else if(peizhiT[i].split('_')[0] == 'alipay'){
                                $('#zhifubao').css('display','inline-block');
                            }
                        }

                        var qrcode = new QRCode(document.getElementById("qrcode"),{
                            text: encodeURI(res.data.codeUrl),
                            width: 100,
                            height: 100,
                        });
                    }
                }
            })
      }

    });

    // 搜索
    var $ = layui.$, active = {
      reload: function(){
        var mchId = $('#searchMchId').val();
        var appId = $("#searchAppId").val();
        //执行重载
        table.reload('tableReload', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            mchId: mchId,
            appId : appId
          }
        });
      }
    };

    form.on('switch(statusSwitch)', function(data){

        var id = $(data.elem).attr('id');
        var updateState = data.elem.checked ? "1" : "0";
        var loadingIndex = layer.load();
        admin.req({
            type: "POST",
            url: layui.setter.baseUrl + '/mch_qrcode/update',
            data: {id: id, status: updateState},
            success: function(res){
                if(res.code == 0) {
                    table.reload('tableReload');
                }
            },
            complete:function(){
                layer.close(loadingIndex);
            }
        });
    });
    $('#search').on('click', function() {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    // 渲染表单
    form.render();
  });
</script>